<template>
  <MineSetHeader :title="title" />
  <div class="gap">
    <ItemView :item="item1"/>
  </div>
  <ItemView :item="item2" @click="onClick"/>
  <ItemView :icon="true" :item="item3" />
  <div class="gap">
    <ItemView :item="item4"/>
  </div>
  <div class="logout" @click="onLogout">退出登录</div>
</template>
<script setup lang="ts">
import {ref,reactive} from "vue"
import { useRouter } from "vue-router"
import MineSetHeader from "../../components/PubHeaderComponent.vue"
import ItemView from "./components/ItemView.vue"
import { useTokenStore } from "../../stores/login"

const router = useRouter()
const { clearToken } = useTokenStore()

const title = "设置"

const item1 = {
    title:"个人信息",
    text:""
}
const item2 = {
    title:"账号管理",
    text:""
}
const item3 = {
    title:"清楚缓存",
    text:"0.0M"
}
const item4 = {
    title:"关于我们",
    text:""
}

const onClick = () =>{
  router.push("/mineaccount")
}

const onLogout = () =>{
    clearToken()
    router.push("/login")
}

</script>
<style lang="less" scoped>

.gap{
    margin: 10px 0;
}

.logout{
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    margin-top: 25px;
}

</style>
